<!-- 图标选择器 -->
<template>
	<div class="icon-picker__wrapper" :style="cssVars" v-click-outside="handleClickOutSide">
		<el-input placeholder="点击图标选择按钮" v-model="iconValue" clearable @clear="handleClear">
			<el-button slot="append" :icon="icon" @click.stop="show = !show"></el-button>
		</el-input>
		<transition name="custom-zoom">
			<div class="icon-picker__container" v-show="show">
				<div class="icon-picker__header">
					<el-input placeholder="搜索图标" v-model="keyword" @input="handleSearch"></el-input>
				</div>
				<div class="icon-picker__body">
					<div class="icon-list">
						<span class="icon-item" v-for="(icon,index) in icons" :key="index" @click="handleClick(icon)">
							<span class="icon-item-wrapper"><i :class="icon"></i></span>
						</span>
					</div>
				</div>
				<!-- <div class="icon-picker__footer">
					<el-pagination
						small
						background
						layout="prev, pager, next"
						:pager-count = "5"
						:total="100">
					</el-pagination>
				</div> -->
			</div>
		</transition>
	</div>
</template>

<script>
import icons from "./icon.json"
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props:{
		value: {
			type: String,
			default: ""
		},
		width: {
			type: Number,
			default: 300
		}
	},
	data() {
		//这里存放数据
		return {
			test: '<svg-icon icon-class="bug" class-name="disabled" />',
			show: false,
			icons,
			keyword: "",
			icon: this.value || "el-icon-more-outline",
			iconValue: this.value,
		};
	},
	//监听属性 类似于data概念
	computed: {
		cssVars(){
			let grid = 5;
			if(this.width<=200){
				grid = 5;
			}else if(this.width<=300){
				grid = 8;
			}else if(this.width<=400){
				grid = 12;
			}else{
				grid = 15;
			}
			
			let icon_width = (this.width - 22 - 16) / grid;
			return {
				'--width': this.width + "px",
				'--icon-width': icon_width + "px",
				'--icon-lineheight': (icon_width-2) + "px"
			}
		}
	},
	directives:{
		'click-outside': {
			bind(el,binding,vnode){
				function eventHandler(e){
					if(el.contains(e.target)){
						return false;
					}
					//如果绑定的参数是函数，正常情况也应该是函数，执行
					if(binding.value && typeof binding.value === 'function'){
						binding.value(e)
					}
				}
				//用于销毁前注销事件监听
				el.__click_outside__ = eventHandler
				//添加事件监听
				document.addEventListener('click',eventHandler)
			},
			unbind(el,binding,vnode){
				//移除事件监听
				document.removeEventListener('click',el.__click_outside__)
				//删除无用属性
				delete el.__click_outside__;
			}
		}
	},
	//监控data中的数据变化
	watch: {},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		
	},
	//方法集合
	methods: {
		handleOpen(){},
		handleClose(){},
		handleClick(row){
			this.iconValue = row
			this.icon = row
			this.$emit("select",row)
			this.$emit("input",row)
		},
		handleClear(){
			this.icon = "el-icon-more-outline"
		},
		handleSearch(){
			let result = icons.filter((item)=>{
				return item.indexOf(this.keyword)!=-1
			})
			this.icons = result
		},
		handleClickOutSide(){
			this.show = false
		}
	},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.icon-picker__wrapper{
	position: relative;
	width: var(--width);
	display: inline-block;

	::v-deep .el-input-group__append{
		left:0;
		background-color: #f6f6f6;
	}
	.icon-picker__container{
		position: absolute;
		width:100%;
		height:300px;
		z-index: 9999;
		margin-top:5px;
		background-color: #fff;
		padding:10px;
		box-shadow: 0 0 5px rgba(0,0,0,0.15);
		
		display: flex;
		flex-direction: column;
		.icon-picker__header{
			flex:0 0 40px;
		}

		.icon-picker__body{
			flex:1;
			overflow: auto;
			.icon-list{
				flex:1;
				// overflow: hidden;
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: center;
				.icon-item{
					text-align: center;
					flex:0 0 var(--icon-width);
					padding:1px;
					.icon-item-wrapper{
						display: block;
						height:var(--icon-width);
						line-height: var(--icon-lineheight);
						width:100%;
						height:100%;
						border:1px solid #ccc;
					}
					&:hover{
						.icon-item-wrapper{
							border-color:#2e85f7;
							color:#2e85f7;
						}
					}
				}
			}
		}
		.icon-picker__footer{
			flex:0 0 30px;
			text-align: center;
			::v-deep .el-pagination{
				padding:0;
				margin-top:10px;
			}
		}
	}
	::v-deep .el-icon-remove {
		color: inherit; 
		vertical-align: inherit; 
		line-height: inherit;
		font-size: inherit;
		cursor: inherit;
	}

	::v-deep .el-icon-circle-plus {
		color: inherit; 
		vertical-align: inherit; 
		line-height: inherit;
		font-size: inherit;
		cursor: inherit;
	}
}
.custom-zoom-enter-active, .custom-zoom-leave-active{
	transition: all 0.3s;
}
.custom-zoom-enter, .custom-zoom-leave-active{
	opacity: 0;
	// transform-origin: 50% 50%;
	// transform: scale(0.8,0.8);
	transform:translate3d(0,-20px,0)
}
</style>